<template>
  <div class="centerpage">
    <el-form :model="user" :rules="rules" ref="user" label-width="100px">
        <div>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
        </div>
        <div class="flex between">
            <el-form-item label="性别" >
                <el-select v-model="user.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" >
                <el-input v-model="user.phone"></el-input>
            </el-form-item>
        </div>
        <div class="flex between">
            <el-form-item label="邮箱" >
                <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" >
                <el-date-picker
                    v-model="user.birth_date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="居住地址">
                <el-input v-model="user.live_address"></el-input>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="出生地址">
                <el-input v-model="user.birth_address"></el-input>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="座右铭">
                <el-input v-model="user.motto"></el-input>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="头像地址">
                <el-upload
                    class="avatar-uploader"
                    action="/api/upload/uploadFile"
                    :http-request="handleUpload"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="user.head_address" :src="user.head_address" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </div>
        <div>
            <el-form-item>
                <el-button @click="resetUser()">保存</el-button>
            </el-form-item>
        </div>
    </el-form>
    <!-- <ul>
        <li class="flex item-center">
            <div class="flex">
                <div class="title">姓名：</div>
                <div class="content">{{ user.name }}</div>
            </div>
            <div class="flex">
                <div class="title">性别：   </div>
                <div class="content">{{ user.sex == '1' ? '男' : '女' }}</div>
            </div>
            <div class="flex">
                <div class="title">出生日期：</div>
                <div class="content">{{ user.birth_date }}</div>
            </div>
        </li>
        <li class="flex item-center">
            <div class="flex">
                <div class="title">邮箱：</div>
                <div class="content">{{ user.email }}</div>
            </div>
            <div class="flex">
                <div class="title">手机号： </div>
                <div class="content">{{ user.phone }}</div>
            </div>
        </li>
        <li class="flex item-center">
            <div class="flex">
                <div class="title">座右铭：</div>
                <div class="content">{{ user.motto }}</div>
            </div>
        </li>
        <li class="flex item-center">
            <div class="flex">
                <div class="title">出生地址：</div>
                <div class="content">{{ user.birth_address }}</div>
            </div>
            <div class="flex">
                <div class="title">居住地址： </div>
                <div class="content">{{ user.live_address }}</div>
            </div>
        </li>
    </ul> -->
  </div>
</template>

<script>
import Api from '@/api'
import { getToken } from '@/utils/auth'
export default {
    data() {
        return {
            user: {},
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            headers: {
                Authorization: getToken()
            },
            imageUrl: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        resetUser() {
            this.$refs.user.validate( async (valid) => {
                if (valid) {
                    const res = await Api.updateUser(this.user)
                    if (res.data.success) {
                        return this.$message.success('修改成功')
                    } else {
                        return this.$message.error(res.msg)
                    }
                } else {
                    return false
                }
            })
        },
        handleUpload(val,a) {
            console.log(val, a)
            let formData = new FormData()
            formData.append('file', val.file)
            formData.append('source', 'userAvatar')

            Api.uploadFile(formData).then(res => {
                console.log(res)
                if (res.success) {
                    this.user.head_address = res.data.show_file_path
                } else {
                    return this.$message.error('上传失败')
                }
            })

        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            // this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M
            // return isJPG && isLt2M;
        },
        async getUserInfo() {
            let {data} = await Api.findLoginUser()
            this.user = data || {}

            data = await Api.infoFile({id: this.user.id, source: 'userAvatar'}).data
            this.$set(this.user, 'head_address', data.show_file_path)
            console.log(this.user)
        }
    }
}
</script>

<style lang="scss" scoped>
.centerpage {
    padding-top: 20px;
    >ul {
        li {
            margin-bottom: 20px;
            >div {
                .title,.content {
                    width: 80px;
                    // border: 1px solid #ccc;
                    height: 30px;
                    line-height: 30px;
                    padding: 0 5px;
                }
                .content {
                    min-width: 350px;
                    flex: 1;
                }
            }
        }
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>